<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { ref, Ref, onMounted } from 'vue'

import { useECharts } from '@/hooks/web/useECharts'
import { mapData } from './data'
import { registerMap } from 'echarts'
import { propTypes } from '@/utils/propTypes'

defineProps({
  width: propTypes.string.def('100%'),
  height: propTypes.string.def('calc(100vh - 78px)')
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

onMounted(async () => {
  const json = (await (await import('./china.json')).default) as any
  registerMap('china', json)
  setOptions({
    visualMap: [
      {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: false,
        orient: 'horizontal',
        inRange: {
          color: ['#e0ffff', '#006edd'],
          symbolSize: [30, 100]
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, .6)',
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    series: [
      {
        name: 'iphone4',
        type: 'map',
        map: 'china',
        label: {
          show: true,
          color: 'rgb(249, 249, 249)',
          fontSize: 10
        },
        itemStyle: {
          areaColor: '#2f82ce',
          borderColor: '#0DAAC1'
        },
        data: mapData
      }
    ]
  })
})
</script>
